<!-- 
    分页组件
    props自定义属性
        page：当前的页码
        limit：每页多少条数据
        total：一共多少条数据
    emit自定义事件
        page、limit发生变化触发pageChange事件
 -->
<template>
    <div class="demo-pagination-block">
        <el-backtop :bottom="100" target=".el-main" ref="backTop" :visibility-height="5"></el-backtop>
        <el-pagination v-model:currentPage="page" v-model:page-size="limit" :total="props.total" background
        layout="total, sizes, prev, pager, next, jumper"  />
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed, nextTick } from 'vue'

let backTop = ref();
// 自定义属性
let props = defineProps({
    page: {
        type: Number,
        default: 1,
    },
    limit: {
        type: Number,
        default: 10,
    },
    total: {
        type: Number,
        default: 0,
    }
})
const page = ref(props.page)
const limit = ref(props.limit)

// 自定义事件名
let emit = defineEmits(['pageChange'])

let pageCount = computed(() => Math.ceil(props.total / limit.value))//总页数
// 监听page、limit,发生变化滚动条回到顶部，并将数据传递到使用页面赋值
watch([page, limit], (newValue, oldValue) => {
    if (page.value <= pageCount.value) {//单页不能超出总页数
        emit('pageChange', { page: page.value, limit: limit.value })
        nextTick(() => {
            backTop.value.$el.click?.()
        })
    }
})

</script>
<style lang="less" scoped>
.demo-pagination-block {
    margin: 20px 0px;
}
</style>
